import React from 'react';
import clsx from 'clsx';

function ScoreInfo({ score, rank, total }) {
  return (
    <div className="flex flex-col gap-2">
      <div className="text-gray-600 text-xs">{score ? score : '分数'}</div>
      <div className="text-gray-600 text-xs">{rank ? rank : '位次'}</div>
      <div className="text-gray-600 text-xs">{total ? total : '人数'}</div>
    </div>
  );
}

function Label({ labels }) {
  return (
    <div className="flex flex-wrap gap-2">
      {labels.map((label, index) => (
        <span key={index} className="text-xs bg-blue-100 text-blue-800 px-1 py-0.5 rounded-full">
          {label}
        </span>
      ))}
    </div>
  );
}

function AboutLabel({ labels }) {
  return (
    <div className="flex flex-wrap gap-2">
      {labels.map((label, index) => (
        <span key={index} className="text-xs text-gray-500">
          {label}
        </span>
      ))}
    </div>
  );
}

export function RecommendTable() {
  return (
    <div className="px-4 py-6 border-4 mt-4">
      <table className="w-full divide-y divide-gray-300">
        <thead className="bg-gray-50">
          <tr>
            <th className="py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
              录取概率
            </th>
            <th className="py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
              院校
            </th>
            <th className="py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
              专业
            </th>
            <th className="py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
              2023招生计划
            </th>
            <th className="py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
              历年
            </th>
            <th className="py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
              2022
            </th>
            <th className="py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
              2021
            </th>
            <th className="py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
              2020
            </th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {[
            // 示例数据，您可以根据需要更改
            {
              name: '北京大学',
              major: '计算机科学',
              admissionProbability: '98%',
              admissionPlan2023: '10人',
              admission2022: {
                score: '689分', rank: '350名', total: '10人'
              },
              admission2021: {
                score: '684分', rank: '272名', total: '10人'
              },
              admission2020: {
                score: '697分', rank: '116名', total: '8人'
              },
              recommendation: '强烈推荐',
              label: ['985', '211', '双一流', '强基计划'],
              about: ['北京', '公办', '综合']
            },
            {
              'name': '清华大学',
              'major': '电子工程',
              'admissionProbability': '96%',
              'admissionPlan2023': '12人',
              'admission2022': { 'score': '688分', 'rank': '330名', 'total': '12人' },
              'admission2021': { 'score': '682分', 'rank': '320名', 'total': '11人' },
              'admission2020': { 'score': '680分', 'rank': '310名', 'total': '10人' },
              'recommendation': '推荐',
              'label': ['985', '211'],
              'about': ['北京', '公办', '综合']
            },
            {
              'name': '浙江大学',
              'major': '化学工程',
              'admissionProbability': '93%',
              'admissionPlan2023': '15人',
              'admission2022': { 'score': '675分', 'rank': '280名', 'total': '15人' },
              'admission2021': { 'score': '674分', 'rank': '270名', 'total': '14人' },
              'admission2020': { 'score': '672分', 'rank': '260名', 'total': '13人' },
              'recommendation': '推荐',
              'label': ['985', '211'],
              'about': ['浙江', '公办', '综合']
            },
            {
              'name': '复旦大学',
              'major': '物理学',
              'admissionProbability': '91%',
              'admissionPlan2023': '14人',
              'admission2022': { 'score': '670分', 'rank': '260名', 'total': '14人' },
              'admission2021': { 'score': '665分', 'rank': '250名', 'total': '12人' },
              'admission2020': { 'score': '663分', 'rank': '240名', 'total': '11人' },
              'recommendation': '推荐',
              'label': ['985', '211'],
              'about': ['上海', '公办', '综合']
            },
            {
              'name': '南京大学',
              'major': '机械工程',
              'admissionProbability': '89%',
              'admissionPlan2023': '11人',
              'admission2022': { 'score': '660分', 'rank': '240名', 'total': '11人' },
              'admission2021': { 'score': '658分', 'rank': '230名', 'total': '10人' },
              'admission2020': { 'score': '657分', 'rank': '220名', 'total': '9人' },
              'recommendation': '推荐',
              'label': ['985', '211'],
              'about': ['南京', '公办', '综合']
            },
            {
              'name': '武汉大学',
              'major': '生物医学工程',
              'admissionProbability': '88%',
              'admissionPlan2023': '13人',
              'admission2022': { 'score': '655分', 'rank': '220名', 'total': '13人' },
              'admission2021': { 'score': '650分', 'rank': '210名', 'total': '12人' },
              'admission2020': { 'score': '648分', 'rank': '200名', 'total': '11人' },
              'recommendation': '推荐',
              'label': ['985', '211'],
              'about': ['武汉', '公办', '综合']
            }
          ].map((university, idx) => (
            <tr key={idx}>
              <td className="whitespace-nowrap py-3 text-base text-gray-700">
                {university.admissionProbability}
                <br />
                <span
                  className={clsx(
                    'py-3 inline-flex text-xs leading-3 font-semibold rounded-full',
                    university.recommendation === '强烈推荐'
                      ? 'bg-cyan-100 text-cyan-800'
                      : 'bg-gray-100 text-gray-800'
                  )}
                >
                  {university.recommendation}
                </span>
              </td>
              <td className="whitespace-nowrap py-3 text-base text-gray-900">
                {university.name}
              </td>
              <td className="whitespace-nowrap py-3 text-base text-gray-700">
                {university.major}
                <Label labels={university.label} />
                <AboutLabel labels={university.about} />
              </td>
              <td className="whitespace-nowrap py-3 text-base text-gray-700">
                {university.admissionPlan2023}
              </td>
              <td className="whitespace-nowrap py-3 text-base text-gray-700">
                <ScoreInfo />
              </td>
              <td className="whitespace-nowrap py-3 text-base text-gray-700">
                <ScoreInfo {...university.admission2022} />
              </td>
              <td className="whitespace-nowrap py-3 text-base text-gray-700">
                <ScoreInfo {...university.admission2021} />
              </td>
              <td className="whitespace-nowrap py-3 text-base text-gray-700">
                <ScoreInfo {...university.admission2020} />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="mt-6 rounded-lg bg-cyan-500 px-3 py-2 text-center text-sm font-semibold text-white">
        查看详细报告
      </div>
    </div>
  );
}
